<template>
  <div>
    <el-card class="card">
      <div class="title">重置密码</div>
      <el-form :rules="rules" class="form" ref="ruleForm" :model="formData">
        <el-form-item>
          <div>重置账号：{{formData.userName}}</div>
        </el-form-item>
        <el-form-item prop="resetCode">
          <el-input v-model="formData.resetCode" placeholder="请输入验证码"></el-input>
        </el-form-item>
        <el-form-item prop="newPasswd">
          <el-input v-model="formData.newPasswd" type="password" placeholder="请输入新密码" show-password></el-input>
        </el-form-item>
        <el-form-item prop="confirmPwd">
          <el-input v-model="formData.confirmPwd" type="password" placeholder="请输入确认密码" show-password></el-input>
        </el-form-item>
        <el-button type="primary" class="next" size="large" @click="submitFun">确定</el-button>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { resetPwdCode } from "@/api/user";
export default {
  data() {
    var confirmPwdRule = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入确认密码"));
      } else if (value !== this.formData.newPasswd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      formData: {},
      rules: {
        resetCode: [
          { required: true, message: "请输入验证码", trigger: "blur" }
        ],
        newPasswd: [
          { required: true, message: "请输入新密码", trigger: "blur" }
        ],
        confirmPwd: [{ validator: confirmPwdRule, trigger: "blur" }]
      }
    };
  },
  created() {
    this.formData.userName = this.$route.query.userName;
  },
  methods: {
    submitFun() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          resetPwdCode(this.formData).then(res => {
            if (res.code == 200) {
              this.$message.success("修改成功!");
              this.$router.push("/login");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style>
.card .el-card__body {
  padding: none !important;
}
</style>
<style lang="scss" scoped>
.card {
  width: 700px;
  margin: auto;
  margin-top: 100px;
  .title {
    padding-bottom: 20px;
    font-size: 30px;
    text-align: center;
    border-bottom: solid 1px #ccc;
  }
  .form {
    padding: 80px 0;
    width: 500px;
    margin: auto;
    .next {
      margin: auto;
      margin-top: 20px;
      width: 100%;
      text-align: center;
    }
  }
}
</style>
